<template>
	<view>
		<view class="login-header" :style="[headerstyle]">
			<view class="dl_img_wrap">
				<image :src="$z.imgsrc('imgs/307813ce497e4ce8b577228e3c8b6498.png')" class="dl_img_logo"></image>
				<view class="logo-text">欢迎登陆</view>
			</view>
			<view class="login-text-wrap">
				<view class="login-text">你好，欢迎使用</view>
				<view class="login-text">移动端crm管理系统</view>
			</view>
		</view>
		<view class="form-wrap">
			<u--form :model="data" ref="uForm">
				<u-form-item v-for="(item,index) in inputs" :key="index">
					<view class="u-flex inputitem">
						<u-input v-model="data[item.value]" border="none" :placeholder="item.placeholder"
							:type="item.type" />
					</view>
				</u-form-item>
			</u--form>

			<view style="height: 100rpx;display: flex;align-items: center;">
				<u-checkbox-group v-model="checkboxValue" placement="column">
					<u-checkbox v-for="(item, index) in checkboxList1" :key="index" :label="item.name"
						:name="item.name">
						我已阅读并同意
						<text class="protocol-text" style="color: #3e7afd;" @tap="toProtocol">《用户服务协议》</text>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-button type="error" :disabled="btndisabled" :loading="loading" :customStyle="btnstyle"
				@click="login">登录</u-button>

		</view>
		<verifyslide ref="verifyslide" @success="verifySuccess"></verifyslide>
	</view>
</template>

<script>
	// import logo from "@/static/logo.png"
	import qs from "qs"
	import verifyslide from "./components/VerifySlide.vue"

	import {
		weBtoa
	} from "@/z/function/btoa.js"
	export default {
		components: {
			verifyslide
		},
		data() {
			return {
				checkboxValue: [],
				// 基本案列数据
				checkboxList1: [{
						name: '协议',
						disabled: false
					},

				],
				headerstyle: {
					backgroundImage: `url(${uni.$z.imgsrc('42a8cf55419440d4bc6251356f39fcbc.png')})`
				},
				// logo,
				loading: false,
				data: {
					username: "",
					password: "",
				},
				inputs: [{
					value: "username",
					placeholder: "用户名"
				}, {
					value: "password",
					type: "password",
					placeholder: "密码"
				}],
				btnstyle: {
					height: "93rpx",
					fontSize: "32rpx",
					// lineHeight: "30rpx"
				},
			}
		},
		computed: {
			btndisabled() {
				for (let i in this.data) {
					if (this.data[i] == "") {
						return true
					}
				}
				return false
			}
		},
		mounted() {

		},
		methods: {
			verifySuccess(params) {
				let data = {
					code: params.captchaVerification,
					grant_type: "password",
					randomStr: "blockPuzzle",
					scope: "server",
					...this.data
				}
				data.grant_type = 'password';
				data.scope = 'server';

				const basicAuth = 'Basic ' + weBtoa('pig:pig');
				console.log(basicAuth, "basicAuth")
				// Session.set('basicAuth', basicAuth);
				// 密码加密
				const encPassword = this.$z.ase2(data.password, 'pigxpigxpigxpigx');
				let {
					username,
					randomStr,
					code,
					grant_type,
					scope
				} = data;
				this.$z.request({
					url: `/auth/oauth2/token?${qs.stringify({
						username,
						randomStr,
						code,
						grant_type,
						scope,
					})}`,
					method: 'post',
					data: {

						password: encPassword
					},
					header: {
						skipToken: true,
						Authorization: basicAuth,
						"Content-Type": 'application/x-www-form-urlencoded', //自定义请求头信息
					},
				}).then(async (res) => {
					this.$store.commit("user/setToken", res["access_token"])
					this.$store.commit("user/setRefreshToken", res["refresh_token"])
					await this.$store.dispatch("user/getUserInfo")
					// uni.navigateTo({
					// 	url: "/pages/index/index"
					// })
					uni.reLaunch({
						url: "/pagesall/index/index"
					})
				});
				console.log(basicAuth, encPassword, username,
					randomStr,
					code,
					grant_type,
					scope, "params");
			},
			toProtocol() {
				wx.downloadFile({
					// 示例 url，并非真实存在
					url: `${uni.$z.imgsrc("电商平台用户注册及服务协议.docx")}`,
					success: function(res) {
						const filePath = res.tempFilePath;
						wx.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log("打开文档成功");
							},
						});
					},
				});
			},
			registerfn() {
				uni.navigateTo({
					url: "/pages/login/register/register"
				})
			},
			async login() {
				if (this.checkboxValue.length == 0) {
					return uni.showToast({
						icon: "none",
						title: "请阅读并勾选服务协议",
						duration: 2000,
					});
				}
				this.$refs.verifyslide.show()
				// this.loading = true;
				// try {
				// 	await this.$store.dispatch("user/applogin", this.data)
				// 	this.loading = false;
				// } catch (e) {
				// 	//TODO handle the exception
				// 	this.loading = false;
				// }
			}
		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.register {
		height: 60rpx;
		color: #2093f5;
	}

	.imgbox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.inputitem {
		height: 90rpx;
		width: 100%;
		// flex: 1;
		// display: flex;
		background: #F5F5F5;
		padding: 0 40rpx;
		border-radius: 8rpx;
		margin-bottom: -8rpx;
	}



	.login-header {
		height: 575rpx;
		background-color: #DC2626;

		background-size: 100% auto;
		width: 100%;
		padding: 114rpx 54rpx 0;
	}

	.dl_img_wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dl_img_logo {
		width: 180rpx;
		height: 70rpx;
		margin-right: 16rpx;
	}

	.logo-text {
		width: 116rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 4rpx;
		font-size: 23rpx;
		color: #DC2626;
		line-height: 36rpx;
		text-align: center;
		align-self: flex-end;
	}

	.login-text-wrap {
		margin-top: 107rpx;
	}

	.login-text {
		font-weight: bold;
		font-size: 40rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.form-wrap {
		// height: calc(100vh - 575rpx);
		background: #FFFFFF;
		padding: 90rpx 54rpx 0;
		position: relative;
		top: -15px;
		border-radius: 20px 20px 0 0;
	}

	.btn-text {
		display: block;
		background: #DC2626;
		color: #FFFFFF;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 90rpx;
	}

	.protocol-wrap {
		padding-top: 71rpx;
		font-size: 26rpx;
		color: #181A1E;
		line-height: 34rpx;
		text-align: center;

		.protocol-text {
			color: #3E7AFD;

		}
	}
</style>